@use "../variables" as *;
@use "sass:color";

.connector-hover-area {
  visibility: hidden;
  stroke: white;
  pointer-events: all;
}

.diagnosis-indicator {
  text-align: center !important;
  &.nav {
    display: inline-block;
    border-color: transparent;
  }
  i {
    display: block;
    position: absolute;
    top: 2.5px;
    left: 2.5px;
    color: $white;
    font-size: 11px;
    &.fa-times {
      left: 0.35rem;
    }
    &.fa-question {
      left: 0.45rem;
    }
  }
}

.connectivity-popover-portal {
  .bp6-transition-container {
    z-index: 999;
  }
  .connectivity-popover {
    margin-top: -1rem;
    max-width: 100vw;
    .connectivity {
      width: 600px;
      max-width: calc(100vw - 2rem);
      max-height: calc(100vh - 8.9rem);
      padding: 1rem;
      position: relative;
      overflow: scroll;
      .connectivity-content {
        table {
          font-size: 1.3rem;
        }
      }
      .connectivity-left-column {
        display: grid;
        gap: 1rem;
      }
      .connectivity-right-column {
        display: grid;
        gap: 1rem;
      }
      .connectivity-diagram svg {
        max-height: 200px !important;
      }
      .port-info,
      .network-info,
      .fbos-info {
        @media (max-width:767px) {
          display: block;
        }
      }
      .network-info {
        margin-bottom: 0;
      }
    }
  }
}

.diagnosis-section {
  align-items: start!important;
}

.connectivity-diagnosis {
  align-items: start;
  h4 {
    margin: 0.4rem 0 1.5rem;
  }
  p {
    padding-bottom: 1rem;
  }
  a {
    display: block;
    font-size: 1.2rem;
  }
  .blinking {
    a {
      display: inline;
    }
  }
  .fa-external-link {
    margin-right: 0.5rem;
  }
}

.camera-connection-indicator,
.memory-usage-display,
.chip-temp-display {
  position: relative;
  .saucer {
    position: absolute;
    top: 2px;
    right: 0.5rem;
    height: 1rem;
    width: 1rem;
    cursor: default;
  }
}

.voltage-display {
  position: relative;
  height: 1.4rem;
  .voltage-saucer {
    position: absolute;
    top: 0;
    right: 0.5rem;
    height: 1rem;
    width: 1rem;
    cursor: default;
  }
}

.voltage-display {
  display: flex;
  .saucer {
    height: 1rem;
    width: 1rem;
    cursor: default;
    margin-left: 0.5rem;
    margin-top: 0.2rem;
  }
  .help-icon {
    margin: 0 0 0.5rem 0.25rem;
    font-size: 1rem;
    vertical-align: middle;
  }
}

.throttle-display {
  .throttle-row {
    display: flex;
    white-space: nowrap;
    .saucer {
      margin-right: 1rem;
    }
  }
}

.wifi-strength-display {
  position: relative;
  .percent-bar {
    position: absolute;
    top: 2px;
    right: 0;
    height: 1rem;
    width: 25%;
    clip-path: polygon(0 85%, 100% 0, 100% 100%, 0% 100%);
    background-color: $light_gray;
    .percent-bar-fill {
      height: 100%;
      background-color: $green;
    }
  }
}

.mac-address {
  font-size: 1rem;
  b {
    font-size: 1.1rem;
  }
}

.port-info,
.network-info,
.fbos-info {
  background: var(--secondary-bg);
  box-shadow: var(--box-shadow);
  padding: 1rem;
  border-radius: 5px;
  .ip-address {
    word-break: break-all;
  }
  a {
    display: block;
    margin-top: 1rem;
    font-size: 1.1rem;
    text-decoration: underline !important;
    i {
      margin-right: 0.5rem;
    }
  }
}

.connectivity-diagram {
  margin: auto;
  width: 20rem;
  fill: $gray;
}

.port-info,
.qos-display {
  .saucer {
    float: right;
    width: 1rem;
    height: 1rem;
    cursor: unset;
  }
}

.port-info {
  i {
    display: block;
    font-size: 1.2rem;
  }
  .fa {
    display: inline;
  }
}

.last-seen-row {
  i {
    margin-right: 0.5rem;
  }
}

.farmbot-os-details {
  max-width: 350px;
}

.fbos-metric-history {
  .fbos-metric-history-table-wrapper {
    display: block;
    overflow-y: scroll;
    max-height: 25rem;
    margin: 0 -2rem -2rem;
    table {
      overflow: unset;
      thead, th {
        text-align: left;
        position: sticky;
        top: 0;
        z-index: 3;
        background: var(--main-bg);
      }
      .saucer {
        margin: 0 auto;
        height: 1.5rem;
        width: 1.5rem;
        cursor: default;
      }
    }
  }
}

.fbos-metric-history-plot-border {
  width: 100%;
  border-radius: 5px;
  background: var(--secondary-bg);
  max-height: 30rem;
  text {
    font-size: 0.6rem;
    text-anchor: middle;
    dominant-baseline: middle;
  }
}

.connectivity-grid {
  grid-template-columns: auto 1fr 1fr 1fr;
}

.realtime-wrapper {
  display: grid;
  gap: 1rem;
  grid-template-columns: auto 1fr;
  @media screen and (max-width: $mobile_max_width) {
    grid-template-columns: 1fr;
    grid-auto-flow: dense;
  }
}

.network-wrapper {
  display: grid;
  grid-auto-flow: column;
  gap: 1rem;
  @media screen and (max-width: $mobile_max_width) {
    grid-template-columns: 1fr !important;
    grid-auto-flow: dense;
  }
}
